<!-- 报名礼包 -->
<template>
	<!--<view class="inviteshop">
	<view class="form">
		<input type="text" class="input" v-model="communityValue"
			placeholder="请输入店铺名称" />
		<input class="input" type="number" :maxlength="11" v-model="mobileValue" placeholder="请输入手机号码" />
		<get-phone-number @cbFn="prebook">
			<button class="form_submit">马上开启</button>
		</get-phone-number>
	</view>
	</view>-->
    <div id="gift" class="flex flex-v flex-pack-justify flex-align-center">
        <div class="main-container flex flex-v flex-align-center">
            <div class="item-container" v-for="(item, index) in giftList" :key="index">
                <div class="form-item flex flex-pack-justify flex-align-center">
                    <span>店铺名称</span>
                    <input type="text" :value="item.serviceName" @input="handleServiceNameInput($event, item)" @blur="autoSave(item)" placeholder="请输入店铺名称">
                </div>
                <div class="form-item flex flex-pack-justify flex-align-center">
                    <span>手机号码</span>
                    <input type="text" type="number" :maxlength="11" :value="item.serviceInfo" @input="handleServiceInfoInput($event, item)" @blur="autoSave(item)" placeholder="请输入手机号码">
                </div>
            </div>
        </div>
        <footer class="footer-container">
            <div class="btn-container">
                <div class="btn-container-save" @click="saveAllGift">邀请好友</div>
            </div>
        </footer>

        <!-- 线上报名 -->
        <!--<v-onlineSign ref="onlineSign" :dataList="giftList" :isReadonly="true" :owner_user_id="query.owner_user_id"></v-onlineSign>
        --><!-- 线上报名 -->
    </div>
</template>

<script>
import OnlineSign from '@/pages/components/onlineSign'
import { getGiftInfo, postSaveGift } from '@/api/gift'
import { getBasicUser } from '@/utils/auth'
export default {
	name: 'inviteShop',
	components: {
		'v-onlineSign': OnlineSign
	},
	data() {
		return {
			giftList: [], // 礼包列表
			giftLimitCount: 10, // 礼包数限制
			flag: 1,
			query: {}
		}
	},
	onLoad(val) {
		this.query = val
	},
	computed: {
		// 获取用户基本信息
		userInfo() {
			return this.$store.state.user.user
		},
		// 优惠总价
		cutDownPrice() {
			let prices = this.giftList.map(item => {
				return item.servicePrice * 1
			})
			let total = 0
			for (let i = 0; i < prices.length; i++) {
				console.log(prices)
				total += parseInt(prices[i])
			}
			return total ? total / 10000 : 0
		},
		// 添加按钮是否显示，礼包数超过限制隐藏
		showAddBtn() {
			if (this.giftList.length > this.giftLimitCount) {
				return false
			}
			return true
		}
	},

	mounted() {
		getBasicUser(this.query.owner_user_id)
		this.init()
	},

	methods: {
		async init() {
			let params = {
				store_id: this.query.owner_user_id
			}
			// 获取礼包信息
			await getGiftInfo(params).then(res => {
				if (res.status === 'success') {
					this.giftList = res.data ? res.data : []
					this.giftList.map(item => {
						item.flag = item.id
					})
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 删除指定礼包
		deleteThisGift(id) {
			this.giftList.map((item, index) => {
				if (item.id === id) {
					this.giftList.splice(index, 1)
				}
				return item
			})
		},
		// 添加一个礼包
		addAGift() {
			// 默认空礼包数据
			let defaultEmptyGift = {
				serviceName: '',
				serviceInfo: '',
				servicePrice: '',
				id: '',
				flag: this.flag++
			}
			this.giftList.push(defaultEmptyGift)
		},
		// 自动保存
		autoSave(item, type = null) {
			if (!item.serviceName) {
				if (type === 'toast') {
					this.$toast('请输入服务名称！')
				}
				return false
			}
			if (!item.serviceInfo) {
				if (type === 'toast') {
					this.$toast('请输入服务说明！')
				}
				return false
			}
			if (item.servicePrice) {
				this.saveAllGift('auto')
			}
		},
		// 保存礼包数组表单
		saveAllGift(type) {
			let params = {
				lists: this.giftList.length === 0 ? '' : this.giftList
			}
			postSaveGift(params).then(res => {
				if (res.status === 'success') {

					this.$toast('功能正在开发中...')
					this.init()

					// ...
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		prebook() {
			submitReservation(params).then(res => {
				this.$toast('功能正在开发中...')
			})
		},
		// 预览礼包
		previewAllGift() {
			uni.showLoading({
				title: '加载中...'
			})
			this.init().then(() => {
				uni.hideLoading()
				this.$refs.onlineSign.openPopup()
			})
		},
		// 处理服务名称表单
		handleServiceNameInput(e, gift) {
			if (e.target.value.length > 15) {
				e.target.value = e.target.value.substring(0, 15)
			}
			this.giftList.map(item => {
				if (item.flag === gift.flag) {
					item.serviceName = e.target.value
				}
			})
		},
		// 处理服务信息表单
		handleServiceInfoInput(e, gift) {
			if (e.target.value.length > 20) {
				e.target.value = e.target.value.substring(0, 20)
			}
			this.giftList.map(item => {
				if (item.flag === gift.flag) {
					item.serviceInfo = e.target.value
				}
			})
		},
		// 处理服务信息表单
		handleServicePriceInput(e, gift, index) {
			this.$nextTick(() => {
				gift.servicePrice = '' + e.target.value.replace(/[^\d]/g, '')
			})
			// this.giftList.splice(index, 1, gift)
		}
	}
}
</script>
<style lang='scss' scope>
	/*@import url("../../../static/css/module/shop.scss");
	.inviteshop {
	    background-color: #f5f5f5;
	    .form {
	        padding: 30px;
	        background-color: #fff;
	        box-sizing: border-box;
	    }
	}
	.inviteshop .form_submit {
	    margin-top: 30px;
	    width: 100%;
	    height: 90px;
	    font-size: 36px;
	    color: #fff;
	    line-height: 90px;
	    text-align: center;
	    background: linear-gradient(to left, #ff9000, #ff6600);
	    border: none;
	    border-radius: 10px;
	}
	.input {
	    display: block;
	    width: 100%;
	    padding: 20px;
	    height: 90px;
	    background-color: #f5f5f5;
	    border: 1px solid #ddd;
	    border-radius: 10px;
	    box-sizing: border-box;
	    & + .input {
	        margin-top: 20px;
	    }
	    &::placeholder {
	        font-size:26px;
	        color:rgba(153,153,153,1);
	    }*/
#gift {
    width: 100%;
    min-height: 100%;
    background: #f5f5f5;
    .main-container {
        width: 100%;
        padding: 15px 0 170px 0;
        .item-container {
            background: #ffffff;
            width: 630px;
            border-radius: 20px;
            padding: 20px;
            margin: 15px 0;
			position: relative;
			.iconclear_wrap {
                position: absolute;
                top: -20px;
                right: -20px;
				width: 60px;
				height: 60px;
				@include direction(center, center);
			}
            .iconclear {}
            .form-item {
                width: 100%;
                height: 100px;
                -webkit-box-shadow: 0 1px 0 0 #dddddd;
                -moz-box-shadow: 0 1px 0 0 #dddddd;
                box-shadow: 0 1px 0 0 #dddddd;
                span {
                    color: #666666;
                    font-size: 30px;
                    line-height: 24px;
                }
                input {
                    color: #333333;
                    font-size: 30px;
                    line-height: 45px;
                    border: none;
                    overflow: auto;
                }
            }
        }
        .add-btn {
            color: #ff6900;
            font-size: 32px;
            text-align: center;
            i {
                margin-right: 10px;
            }
        }
        .gray {
            padding: 20px 0;
            color: #666666;
            font-size: 26px;
            line-height: 30px;
        }
    }
    .footer-container {
        width: 100%;
        height: 170px;
        .btn-container {
            height: 100px;
            color: #3a1b04;
            font-size: 32px;
            word-spacing: 0.6px;
            line-height: 100px;
            text-align: center;
            display: flex;
            align-items: center;
            & > div {
                height: 100%;
            }
            .btn-container-preview {
                width: 40%;
                color: #333;
                background-color: #fff;
            }
            .btn-container-save {
                width: 100%;
                background: #ffd11a;
            }
        }
        .cut-down {
            width: 100%;
            height: 70px;
            font-size: 30px;
            line-height: 70px;
            text-align: left;
            padding-left: 42px;
            background: #fff9e3;
            color: #333333;
            .price {
                color: #ff6900;
            }
        }
    }
}
</style>
